<template>

  <view>
      <view>
       <uni-forms style="margin: 12px;" ref="form"  :modelValue="baseFormData" label-position="top" label-width="120px" >
          <uni-forms-item label="留校原因" required >
              <uni-easyinput v-model="baseFormData.reason" type="textarea" placeholder="请输入留校原因" />
          </uni-forms-item>
          <uni-forms-item label="留校开始时间" required >
              <uni-easyinput v-model="baseFormData.begintime" placeholder="请输入留校开始时间" />
          </uni-forms-item>
          <uni-forms-item label="留校结束时间" required >
              <uni-easyinput v-model="baseFormData.endtime" placeholder="请输入留校结束时间" />
          </uni-forms-item>
          <uni-forms-item label="家庭联系人姓名" required >
              <uni-easyinput v-model="baseFormData.name" placeholder="请输入家庭联系人姓名" />
          </uni-forms-item>
          <uni-forms-item label="家庭联系人电话" required>
              <uni-easyinput v-model="baseFormData.tel"  placeholder="请输入家庭联系人电话" />
          </uni-forms-item>
          <uni-forms-item label="是否需要住宿" required>
              <uni-data-checkbox v-model="baseFormData.opt" :localdata="opts" />
          </uni-forms-item>
          <uni-forms-item label="校外住宿地址" required>
              <uni-data-picker placeholder="请选择省市区" :localdata="range" v-model="baseFormData.address">
              </uni-data-picker>
              <uni-easyinput placeholder="详细地址" />
          </uni-forms-item>
      </uni-forms>
      </view>
      <view>
          <button class="bu" @click="tosuccess()">
              <text class="zi">
                  确认登记
              </text>
          </button>
      </view>
  </view>

</template>

<script setup>
  import { reactive, ref } from 'vue';
  const form = ref()
  let tosuccess = function(){
    uni.navigateTo({
      url:"/pages/index/success"
    })
  }
  const baseFormData = reactive({
    reason: '',
    begintime:'',
    endtime:'',
    name:'',
    tel: '',
    address: '',
    opt: 1,
  })
    const opts =ref([

    {
      text: '需要',
      value: 0
    }, {
      text: '不需要',
      value: 1
    }
  ])
  const range =ref(

      [{
        text: "山西省",
        value: "1-0",
        children: [
          {
            text: "太原市",
            value: "1-1",
            children:[
              {
                text: "尖草坪区市",
                value: "1-1-1"
              },
              {
                text: "小店区",
                value: "1-1-2"
              },
            ]
          },
          {
            text: "临汾市",
            value: "1-2",
            children:[
              {
                text: "尖草坪区市",
                value: "1-2-1"
              },
              {
                text: "小店区",
                value: "1-2-2"
              },
            ]
          },

        ]
      },
        {
          text: "河南省",
          value: "2-0",
          children: [{
            text: "郑州市",
            value: "2-1",
            children:[
              {
                text: "尖草坪区市",
                value: "2-1-1"
              },
              {
                text: "小店区",
                value: "2-1-2"
              },
            ]
          },
            {
              text: "洛阳市",
              value: "2-2",
              children:[
                {
                  text: "尖草坪区市",
                  value: "2-1-1"
                },
                {
                  text: "小店区",
                  value: "2-2-2"
                },
              ]
            }]
        },
        {
          text: "山东省",
          value: "3-0",
          children: [{
            text: "济南市",
            value: "3-1"
          },
            {
              text: "青岛市",
              value: "3-2"
            }]
        }
      ])


</script>

<style scoped>
  .bu{
      display: block;
      text-align: center;
      line-height: 40px;
      width: 95%;
      height: 40px;
      background-image: linear-gradient(90deg, #6CA9FF 0%, #166AFF 100%);
      border-radius: 4px;

  }
  .zi{
      font-family: PingFangSC-Medium;
      font-weight: 500;
      font-size: 15px;
      color: #FFFFFF;

  }
</style>
